<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>微信客户信息管理</title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
	<!-- 筛选表单区域（适配客户信息字段） -->
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<!-- 公众号名称筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">公众号名称</label>
						<div class="layui-input-inline">
							<input type="text" name="wechat_name" id="wechat_name" placeholder="输入公众号名称"
								class="layui-input">
						</div>
					</div>
					<!-- 客户姓名筛选 -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">客户姓名</label>
						<div class="layui-input-inline">
							<input type="text" name="name" id="name" placeholder="输入客户姓名" class="layui-input">
						</div>
					</div>
					<!-- 手机号筛选（精确匹配，手机号唯一） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">手机号</label>
						<div class="layui-input-inline">
							<input type="text" name="phone" id="phone" placeholder="输入手机号" class="layui-input">
						</div>
					</div>
					<!-- OpenID筛选（精确匹配） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">OpenID</label>
						<div class="layui-input-inline">
							<input type="text" name="openid" id="openid" placeholder="输入OpenID" class="layui-input">
						</div>
					</div>
					<!-- 客户状态筛选（启用/关闭） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">客户状态</label>
						<div class="layui-input-inline">
							<select name="is_active" id="is_active" lay-search>
								<option value="">请下拉选择</option>
								<option value="1">启用</option>
								<option value="0">关闭</option>
							</select>
						</div>
					</div>
					<br>
					<!-- 搜索/重置按钮（与微信模板页一致） -->
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="base-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 表格展示区域（适配客户信息字段） -->
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="base-table" lay-filter="base-table"></table>
		</div>
	</div>

	<!-- 表格工具栏（新增按钮，无消息记录按钮） -->
	<!-- <script type="text/html" id="base-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
	        <i class="layui-icon layui-icon-add-1"></i>
	        新增客户
	    </button>
	</script> -->

	<!-- 表格操作列（编辑/删除按钮，与微信模板页一致） -->
	<script type="text/html" id="base-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm layui-btn-disabled" lay-event="edit" disabled>
			<i class="layui-icon layui-icon-edit"></i>编辑
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-sm layui-btn-disabled" lay-event="remove" disabled>
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>

	<!-- 客户状态模板（完全复用微信模板页的状态样式） -->
	<script type="text/html" id="base-is-active">
        {{# if (d.is_active == 1) { }}
            <i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"><span>启用</span></i>  
        {{# } else if (d.is_active == 0) { }}
            <i class="layui-icon layui-icon-face-cry" style="font-size: 20px; color: #ff1e1e;"><span>关闭</span></i> 
        {{# } }}
    </script>

	<!-- OpenID长文本显示模板（换行处理，避免表格变形） -->
	<script type="text/html" id="base-openid">
		<div style="word-break: break-all; font-size: 12px; max-width: 200px;">
			{{d.openid}}
		</div>
	</script>

	<!-- 引入依赖JS（与微信模板页一致） -->
	<script src="../../component/com/api.js"></script>
	<script src="../../component/com/auth.js"></script>
	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery', 'common'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			// 1. 基础配置（适配客户信息接口）
			let MODULE_PATH = "config/"; // 新增/编辑页所在路径（与微信模板页一致）
			let API_BASE_URL = apiConfig.baseUrl;
			let token = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");

			// 2. 表格列配置（适配WechatOpenid字段，调整字段顺序和宽度）
			let cols = [
				[
					{
						type: 'checkbox'
					},
					{
						title: '序号', field: 'id', align: 'left', width: 80
					},
					{
						title: '客户状态', field: 'is_active', align: 'center', width: 100, templet: '#base-is-active'
					},
					{
						title: '创建时间', field: 'create_time', align: 'center', width: 180
					},
					{
						title: '手机号', field: 'phone', align: 'center', width: 130
					},
					{
						title: 'OpenID', field: 'openid', align: 'left', width: 300, templet: '#base-openid' // 长文本处理
					},
					{
						title: '公众号名称', field: 'wechat_name', align: 'left', width: 150
					},
					{
						title: '客户姓名', field: 'name', align: 'center', width: 120
					},
					{
						title: '描述说明', field: 'description', align: 'left', width: 180
					},
					{
						title: '更新时间', field: 'update_time', align: 'center', width: 180, hide: true
					}
					// {
					// 	title: '操作', toolbar: '#base-bar', align: 'center', width: 180, fixed: "right"
					// }
				]
			];

			// 3. 渲染表格（适配客户信息接口）
			table.render({
				elem: '#base-table',
				// 客户信息后端接口地址（对应WechatOpenidListCreateView）
				url: `${API_BASE_URL}/wechat/openid/`,
				page: true,
				// 分页参数（与后端保持一致）
				request: {
					pageName: 'page',
					limitName: 'limit'
				},
				// 分页条数选择器（与微信模板页一致）
				limits: [10, 20, 30, 40, 50, 100],
				limit: 10,
				cols: cols,
				skin: 'line',
				toolbar: '#base-toolbar',
				// 请求头携带Token（权限验证）
				headers: {
					"Authorization": token
				},
				// 解析后端返回数据（与微信模板页格式一致）
				parseData: function (res) {
					return {
						"code": res.success ? 0 : 1,
						"msg": res.message || "操作成功",
						"count": res.data.count,
						"data": res.data.results,
						"curr": res.data.current_page
					};
				},
				// 默认工具栏（刷新、导出等，与微信模板页一致）
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});

			// 4. 表格行操作事件（编辑/删除，与微信模板页逻辑一致）
			table.on('tool(base-table)', function (obj) {
				switch (obj.event) {
					case "edit":
						window.edit(obj)
						break;
					case "remove":
						window.remove(obj)
						break;
				}
			});

			// 5. 表格工具栏事件（新增/刷新，无消息记录按钮）
			table.on('toolbar(base-table)', function (obj) {
				switch (obj.event) {
					case "add":
						window.add(obj)
						break;
					case "refresh":
						window.refresh(obj)
						break;
				}
			});

			// 6. 筛选表单提交事件（携带筛选参数刷新表格）
			form.on('submit(base-query)', function (data) {
				table.reload('base-table', {
					where: data.field,
					page: {
						curr: 1 // 筛选时回到第一页
					}
				})
				return false;
			});

			// 7. 新增客户：打开新增弹窗
			window.add = function () {
				layer.open({
					type: 2,
					title: '新增微信客户信息',
					shade: 0.1,
					// 适配移动端和PC端（与微信模板页一致）
					area: [common.isModile() ? '100%' : '650px', common.isModile() ? '100%' : '500px'],
					content: MODULE_PATH + 'wechat-openid-add.html' // 新增页路径
				});
			}

			// 8. 编辑客户：携带ID打开编辑弹窗
			window.edit = function (obj) {
				layer.open({
					type: 2,
					title: `编辑客户信息: [${obj.data.name}（${obj.data.phone}）]`,
					shade: 0.1,
					area: [common.isModile() ? '100%' : '650px', common.isModile() ? '100%' : '500px'],
					content: MODULE_PATH + `wechat-openid-edit.html?id=${obj.data.id}` // 编辑页路径（携带客户ID）
				});
			}

			// 9. 删除客户：调用后端删除接口（逻辑删除，检查关联记录）
			window.remove = function (obj) {
				layer.confirm(`确定要删除客户「${obj.data.name}（${obj.data.phone}）」吗？`, {
					icon: 3,
					title: '提示: 客户删除'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						// 客户信息删除接口（对应WechatOpenidRetrieveUpdateDestroyView）
						url: `${API_BASE_URL}/wechat/openid/${obj.data.id}/`,
						dataType: 'json',
						type: 'delete',
						headers: {
							"Authorization": token
						},
						success: function (result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.message, {
									icon: 1,
									time: 1000
								}, function () {
									obj.del(); // 删除表格行
								});
							} else {
								layer.msg(result.message, {
									icon: 2,
									time: 1000
								});
							}
						},
						error: function (xhr) {
							layer.close(loading);
							const errMsg = xhr.status === 401 ? '登录已过期，请重新登录' : '网络异常，删除失败';
							layer.msg(errMsg, { icon: 2, time: 2000 });
							if (xhr.status === 401) {
								setTimeout(() => {
									window.location.href = '../../login.html';
								}, 2000);
							}
						}
					})
				});
			}

			// 10. 刷新表格（与微信模板页一致）
			window.refresh = function (param) {
				table.reload('base-table');
			}
		})
	</script>
</body>

</html>